<template>
  <div class="container">
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>
    <!-- 选中文件时会触发change事件 -->
    <input type="file" @change="hFileChange" ref="file" hidden>
    <van-cell-group >
      <van-cell is-link title="头像"  center @click="hShowImg">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>
      <van-cell is-link title="名称" :value="user.name" @click="showName=true"/>
      <van-cell is-link title="性别" :value="user.gender === 1?'男':'女'" @click="showGender=true"/>
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
    </van-cell-group>

    <!-- 编辑区域 姓名-->
    <van-dialog @confirm="hSaveName" v-model="showName" title="修改名字" show-cancel-button>
      <van-field type="text" focus v-model.trim="newName" placeholder="请输入名字" />
    </van-dialog>

    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
          title="修改性别"
          left-text="取消"
          @click-left="showGender=false"
      >
      </van-nav-bar>

        <van-cell is-link title="男" @click="hChangeGender(1)" />
        <van-cell is-link title="女" @click="hChangeGender(0)" />
    </van-popup>

    <van-popup v-model="showBirthday" position="bottom">
      <van-nav-bar
        title="修改生日"
      >
      </van-nav-bar>
      <van-datetime-picker
        v-model="newDate"
        @confirm="hSaveBirthday"
        @cancel="showBirthday=false"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getProfile, updateUserInfo, updateUserPhoto } from '@/api/user.js'
export default {
  name: 'userProfile',
  created () {
    this.getProfile()
  },
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,

      // 当前用户的信息
      user: {},

      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  methods: {
    // 点头像 触发input的点击事件
    hShowImg () {
      // 手动触发input的click事件
      this.$refs.file.click()
    },
    // 选择文件
    async hFileChange () {
      // 拿到用户选择好的头像
      const file = this.$refs.file.files[0]
      if (!file) {
        // 用户没有选择文件 就退出
        return
      }
      // 后台要求参数为FromData类型
      const fd = new FormData()
      fd.append('photo', file)
      // 调接口
      const result = await updateUserPhoto(fd)
      // 更新本地数据
      this.user.photo = result.data.data.photo
    },
    // 获取个人信息
    async getProfile () {
      const result = await getProfile()
      this.user = result.data.data
    },
    // 改名字
    async hSaveName () {
      if (!this.newName) {
        this.showName = false
        return
      }
      // 调接口改名字
      const result = await updateUserInfo({
        name: this.newName
      })
      console.log(result)
      // 关闭弹层
      this.showName = false
      // 把新名字显示出来
      this.user.name = this.newName
    },
    async hChangeGender (g) {
      const result = await updateUserInfo({
        gender: g
      })
      console.log(result)
      // 关闭弹层
      this.showGender = false
      // 修改本地信息
      this.user.gender = g
    },
    async hSaveBirthday () {
      // 格式化为xxxx-xx-xx
      const bir = dayjs(this.newDate).format('YYYY-MM-DD')
      const result = await updateUserInfo({
        birthday: bir
      })
      console.log(result)
      // 关闭弹层
      this.showBirthday = false
      // 修改本地信息
      this.user.birthday = bir
    }
  }
}
</script>

<style lang="less">
.van-nav-bar__text{
  color:#fff;
}
</style>
